import './index.less'
import Tabs from '@/components/tabs'
import FooterMarket from '@/components/footer-market'
import SelectDropdown from './components/select-dropdown'
import MarketTabs from '@/components/market-tabs'
import SelectTab from './components/select-tab'
import { useState } from 'react'
import { getImage } from '@/tools'

const tabList = [{ name: '自选', value: 0 }, { name: '现货行情', value: 1 }]
const allList = [{ name: '现货', value: 0 }]
const contract = [{ name: 'USDT合约', value: 0 }, { name: '币本位合约', value: 1 }]

function Market() {
  const [tabValue, setTabValue] = useState<number>(1)
  const [indexVal, setindexVal] = useState({
    contract: 0,
    index: 0
  })
  return (
    <div>
      <div className='market-img'>
        <img src={getImage('market', 'top-b.bc10c90.png')} alt="" />
        <div className='market-box'>
          <div className='market-text'>市场行情</div>
        </div>
      </div>
      <div className='market-box'>
        <MarketTabs></MarketTabs>
      </div>
      <div className='market-main'>
        <Tabs tabList={tabList} tabValue={tabValue} setTabValue={setTabValue}></Tabs>
      </div>
      {
        tabValue === 1 && <div className='select-dow'>
          <SelectDropdown></SelectDropdown>
        </div>
      }
      {
        tabValue === 0 && <div className='select-dow select-all'>
          {
            allList?.map(res => {
              return (
                <div key={res?.value} className={`item ${indexVal.index === res?.value ? 'val' : ''}`} onClick={() => { setindexVal({ ...indexVal, index: res.value }) }}>
                  {res?.name}
                </div>
              )
            })
          }
        </div>
      }

      {
        tabValue === 2 && <div className='select-dow select-all'>
          {
            contract?.map(res => {
              return (
                <div key={res?.value} className={`item ${indexVal.contract === res?.value ? 'val' : ''}`} onClick={() => { setindexVal({ ...indexVal, contract: res.value }) }}>
                  {res?.name}
                </div>
              )
            })
          }
        </div>
      }

      <div className='select-dow'>
        <SelectTab tabValue={tabValue} setTabValue={setTabValue} indexVal={indexVal.index}></SelectTab>
      </div>

      <div className='footer'>
        <FooterMarket></FooterMarket>
      </div>


    </div>
  )
}

export default Market